<template>
  <d2-container>

    <template slot="header">

      <el-form :gutter="24" ref="search-box" :model="mainQuery" label-width="auto" label-position="left" :inline="true">

        <el-form-item label="名称" size="mini">
          <el-input placeholder="" v-model="mainQuery.name" @keyup.enter.native="handleSearch" clearable></el-input>
        </el-form-item>

        <el-form-item label="主题" size="mini">
          <el-input placeholder="" v-model="mainQuery.subject" @keyup.enter.native="handleSearch" clearable></el-input>
        </el-form-item>

        <!--      <el-form-item label="发送类型" size="mini">
          <el-select v-model="mainQuery.sendType" placeholder="所有" clearable>
            <el-option
              v-for="item in sendTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="接收者" size="mini">
          <el-select v-model="mainQuery.targetType" placeholder="所有" clearable>
            <el-option
              v-for="item in targetTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      <el-form-item label="状态" size="mini">
          <el-select v-model="mainQuery.status" placeholder="所有" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->

      </el-form>

      <div class="search-btn-box">
        <div class="left">
          <el-button-group>
            <el-button class="filter-item" icon="el-icon-plus" type="success" @click="handleAdd" :loading="mainTable.loading" size="mini">添加</el-button>
            <el-tooltip :disabled="!!mainTable.current" content="请选择一行数据">
              <el-button class="filter-item" icon="el-icon-edit" type="default" @click="handleSet" :loading="mainTable.loading" size="mini">修改</el-button>
            </el-tooltip>
          </el-button-group>
        </div>
        <div class="right">
          <el-button class="filter-item" icon="el-icon-refresh" type="default" @click="resetMainData" :loading="mainTable.loading" size="mini">重置</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleSearch" :loading="mainTable.loading" size="mini">查询</el-button>
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud ref="d2Crud" :options="mainTable.options" :index-row="mainTable.indexRow" :columns="mainTable.columns" :data="mainTable.list" :selection-row="mainTable.allowSelect" :loading="mainTable.loading" :rowHandle="mainTable.rowHandle" @current-change="onMainCurrentChange" @row-dblclick="onMainDoubleClick" @selection-change="" @handle-preview="handlePreview"></d2-crud>

    <template slot="footer">
      <el-pagination @size-change="handleMainSizeChange" @current-change="handleMainPageChange" :current-page="mainTable.pagination.currentPage" :page-sizes="mainTable.pagination.pageSizes" :page-size="mainTable.pagination.pageSize" :page-count="mainTable.pagination.pageCount" :total="mainTable.pagination.total" layout="total, sizes, prev, pager, next, jumper" :background="true">
      </el-pagination>
    </template>

    <dialog-add ref="dialog-add" @dialog-close="fetchMainData" :targetTypeOptions="targetTypeOptions" :sendTypeOptions="sendTypeOptions" :statusOptions="statusOptions"></dialog-add>

    <dialog-preview ref="dialog-preview"></dialog-preview>

  </d2-container>
</template>

<script>

import util from '@/libs/util';
import DialogAdd from './dialog-add';
import DialogPreview from './dialog-preview';

import ApiMain from '@/api/email.type';

export default {
  name: 'email-type',
  mixins: [
  ],
  components: {
    DialogAdd,
    DialogPreview,
  },
  data() {
    return {

      statusOptions: util.tool.getStatusOptions(),
      targetTypeOptions: [],
      sendTypeOptions: [],

      mainQuery: {
        name: '',
        subject: '',
        sendType: '',
        targetType: '',
        status: '',
      },

      mainQueryRaw: null,
      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: '暂无数据',
          size: 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          // {title: '发送类型', key: 'strSendType', align: 'center', showOverflowTooltip: true},
          { title: '邮件主题', key: 'subject', align: 'center', showOverflowTooltip: true },
          { title: '邮件类型', key: 'strType', align: 'center', showOverflowTooltip: true },

          // {title: '状态', key: 'strStatus', align: 'center', showOverflowTooltip: true, width: 50},
          { title: '创建人', key: 'createBy', align: 'center', showOverflowTooltip: true, width: 80 },

          { title: '修改时间', key: 'updateTime', align: 'center', showOverflowTooltip: true, width: 160 },
          { title: '创建时间', key: 'createTime', align: 'center', showOverflowTooltip: true, width: 160 },
        ],
        rowHandle: {
          width: '120',
          align: 'center',
          fixed: 'right',
          custom: [
            {
              text: '预览邮件',
              type: 'default',
              size: 'mini',
              emit: 'handle-preview'
            },
          ]
        },
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
        current: null,
      },

    }
  },
  mounted() {

    this.mainQueryRaw = Object.copy(this.mainQuery);

    var re = this.fetchOptions()
      .finally(() => {
        this.resetMainData();
      });

  },

  methods: {

    renderMainData(re) {

      re.list.forEach(item => {
        var statusItem = this.statusOptions.find(v => v.value == item.status);
        item.strStatus = statusItem ? statusItem.label : '-';

        var targetTypeItem = this.targetTypeOptions.find(v => v.value == item.targetType);
        item.strTargetType = targetTypeItem ? targetTypeItem.label : '-';

        var sendTypeItem = this.sendTypeOptions.find(v => v.value == item.sendType);
        item.strSendType = sendTypeItem ? sendTypeItem.label : '-';
      });

      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleSearch() {
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },
    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.page = val;
      this.fetchMainData()
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.fetchMainData();
    },

    async fetchOptions() {

      var re = await ApiMain.getTargetTypeOptions();
      this.targetTypeOptions = re;

      var re = await ApiMain.getSendTypeOptions();
      this.sendTypeOptions = re;
    },

    async fetchMainData() {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) { }


      this.mainTable.loading = false;

    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleSet();
    },

    handleAdd() {
      this.$refs['dialog-add'].show();
    },

    handleSet() {

      if (this.mainTable.current) {
        this.$refs['dialog-add'].show(this.mainTable.current.id);
      }
    },

    handlePreview({ row }) {
      this.$refs['dialog-preview'].show(Object.copy(row));
    },
  }
}
</script>

<style>
</style>
